import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { Select, Row, Col, Table, Badge, Button, Card, Form, Input, Cascader } from 'antd';
import { connect } from 'react-redux';
import rTime from '../../utils/formateDate'
import {
    BankOutlined, EnvironmentOutlined, TeamOutlined, HomeOutlined, ClockCircleOutlined
} from '@ant-design/icons';
import '../subject/studentsInfo/StudentsInfo.scss';
import MainTitle from '@/components/MainTitle';
import request from '@/utils/request'
import '../subject/roomInfo/roomInfo.scss';
import { withSelector } from '../../utils/hoc'
import { updateInfo } from '@/redux/actions/user'
import NoInfo from '../../components/NoInfo';
const { Option } = Select;
function Dashboard(props) {
    const style = { background: '#fff', padding: '30px', margin: '40px 0' };

    // 获取房间成员信息
    const [roomInfo, setRoomInfo] = useState({});
    const getRoomInfo = useCallback(async id => {
        const { data } = await request.get('/room/getRoomInfo', { params: { roomId: id } });
        setRoomInfo(data.data);
    }, []);
    //获取评价
    const [evaluates, setEvaluates] = useState([]);
    const getEvaluates = useCallback(async id => {
        const { data } = await request.get('/evaluate/getEvaluates', { params: { roomId: id } });
        setEvaluates(data.data.evaluates);
    }, []);
    //宿舍成员表头
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            render: text => text
        },
        {
            title: '学号',
            dataIndex: 'account',
        },
        {
            title: '电话号',
            dataIndex: 'phone',
        },
        {
            title: '宿舍楼名称',
            // dataIndex: 'buildingname',
            key: 'buildingname',
            render: () => {
                return (
                    props.userInfo.building.name
                )
            }
        }, {
            title: '宿舍楼层',
            key: 'layer',
            render: () => {
                return props.userInfo.floor.layer
            }
        }, {
            title: '房间号',
            key: 'roomnum',
            render: () => {
                return props.userInfo.room.number
            }
        },
        {
            title: '入住时间',
            dataIndex: 'createdAt',
            render: (text) => {
                return (
                    <>
                        < ClockCircleOutlined style={{ marginRight: 10 }} />
                        {
                            rTime(text)
                        }
                    </>
                )
            }
        }
    ]

    useEffect(() => {
        if (!props.userInfo.roomId) {
            getBuildings();
            return;
        }
        getRoomInfo(props.userInfo.roomId)
        getEvaluates(props.userInfo.roomId)
    }, [])

    //楼栋选择 初始化数据
    const [optionLists, setoptionLists] = useState([]);
    const getBuildings = useCallback(async () => {
        const { data } = await request.get('/building/getBuildings');
        data.data.buildings.forEach((item) => {
            optionLists.push({
                value: item.id,
                label: item.name,
                isLeaf: false,
            })
        })
        setoptionLists(optionLists);

    }, []);

    //楼层选择
    const getFloors = useCallback(async id => {
        const { data } = await request.get('/floor/getFloors', { params: { buildingId: id } });
        data.data.floors.forEach((item) => {
            item.value = item.id;
            item.label = item.layer;
            item.isLeaf = false;
        })
        if (data.data.floors.length === 0) {
            return [{ label: '暂无楼层可选择', isLeaf: true, value: '', disabled: true }]
        } else {
            return data.data.floors
        }
    }, []);
    //房间选择
    const getRooms = useCallback(async id => {
        const { data } = await request.get('/room/getRooms', { params: { floorId: id } });
        data.data.rooms.forEach((item) => {
            item.value = item.id;
            item.label = item.number;
            item.isLeaf = true;
            item.disabled = item.currentPeopleNum === 6 ? true : false
        })
        if (data.data.rooms.length === 0) {
            return [{ label: '暂无房间可选择', isLeaf: true, value: '', disabled: true }]
        } else {
            return data.data.rooms
        }
    }, []);
    const [options, setOptions] = useState(optionLists);
    const loadData = useCallback(async selectedOptions => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        targetOption.loading = true;
        const floors = await getFloors(targetOption.value);
        targetOption.loading = false;
        targetOption.children = floors;
        setOptions([...options]);
        if (selectedOptions.length === 1) return;
        targetOption.loading = true;
        const rooms = await getRooms(targetOption.value);
        targetOption.loading = false;
        targetOption.children = rooms;
        setOptions([...options]);
    }, [])
    const onChange = useCallback(() => { }, [])
    //提交表单
    const onFinish = useCallback(async values => {
        const { data } = await props.updateInfo({ checkTime: new Date(), name: values.name, phone: values.phone, roomId: values.room[2] });
        getRoomInfo(data.roomId)
        getEvaluates(data.roomId)
    }, []);
    return (
        <div id="StudentsInfo">
            {
                props.userInfo.roomId === null ?
                    <>
                        <div style={{ display: 'flex' }}>
                            <img src="http://study.esunr.xyz/1582549904311.png" alt="" style={{ width: 160, height: 160, }} />
                            <div style={{ marginLeft: 30 }}>
                                <h2 style={{ fontSize: 49 }}>欢迎您，新用户</h2>
                                <p style={{ fontSize: 20, color: '#666' }}>用户信息填写</p>
                            </div>
                        </div>
                        <div className='student-guid' style={{ margin: '40px 0', padding: '30px 0', backgroundColor: '#fff' }}>
                            <Card title="新用户指南" bordered={false} headStyle={{ fontSize: 32 }}>
                                <p>看起来您是第一是使用该系统，先填写个人信息吧！</p>
                                <Form
                                    name="basic"
                                    // labelCol={{ span: 8 }}
                                    // wrapperCol={{ span: 16 }}
                                    initialValues={{ remember: true }}
                                    layout='vertical'
                                    onFinish={onFinish}
                                    // onFinishFailed={onFinishFailed}
                                    autoComplete="off"
                                >
                                    <Form.Item
                                        label="学生姓名"
                                        name="name"
                                        rules={[{ required: true, message: 'Please input your username!' }]}
                                    >
                                        <Input />
                                    </Form.Item>

                                    <Form.Item
                                        label="联系方式"
                                        name="phone"
                                        rules={[{ required: true, message: 'Please input your phone!' }]}
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item
                                        label="选择想要入住的宿舍"
                                        name="room"
                                        rules={[{ required: true, message: 'Please select your room!' }]}
                                    >
                                        <Cascader options={options} onChange={onChange} loadData={loadData} notFoundContent />

                                    </Form.Item>
                                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                        <Button type="primary" htmlType="submit">
                                            提交信息
                                        </Button>
                                    </Form.Item>


                                </Form>


                            </Card>

                        </div>


                    </>


                    : <>


                        <MainTitle
                        >宿舍概览</MainTitle>
                        <div className="StudentBuilding" style={{ margin: '40px 0' }}>
                            <div className="info_list">
                                <Row gutter={40}>
                                    <Col className="gutter-row" span={6}>
                                        <div className="item">
                                            <div className="item_icon">
                                                <BankOutlined style={{ fontSize: 50, color: '#FF4D4F' }} />
                                            </div>
                                            <div className="item_txt">
                                                <div className="title">房间号</div>
                                                <span className="num">{props.userInfo.room.number}</span>
                                            </div>
                                        </div>
                                    </Col>
                                    <Col className="gutter-row" span={6}>
                                        <div className="item">
                                            <div className="item_icon">
                                                <EnvironmentOutlined style={{ fontSize: 50, color: '#1890FF' }} />
                                            </div>
                                            <div className="item_txt">
                                                <div className="title">所在楼层</div>
                                                <span className="num">{props.userInfo.floor.layer}层</span>
                                            </div>
                                        </div>
                                    </Col>
                                    <Col className="gutter-row" span={6}>
                                        <div className="item">
                                            <div className="item_icon">
                                                <HomeOutlined style={{ fontSize: 50, color: '#1890FF' }} />
                                            </div>
                                            <div className="item_txt">
                                                <div className="title">宿舍楼</div>
                                                <span className="num">{props.userInfo.building.name}</span>
                                            </div>
                                        </div>
                                    </Col>
                                    <Col className="gutter-row" span={6}>
                                        <div className="item">
                                            <div className="item_icon">
                                                <TeamOutlined style={{ fontSize: 50, color: '#52C41A' }} />
                                            </div>
                                            <div className="item_txt">
                                                <div className="title">入住日期</div>
                                                <span className="num">{rTime(props.userInfo.room.createdAt)}</span>
                                            </div>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                        <MainTitle>当前入住</MainTitle>
                        <div className='wapper' style={style}>
                            <Table
                                dataSource={roomInfo.users}
                                pagination={false}
                                rowKey='id'
                                columns={columns}
                            />
                        </div>
                        <MainTitle>宿舍评价</MainTitle>
                        <div className='roomInfo' style={{ margin: '40px 0' }}>
                            <div className="dormitory_evaluation">
                                {
                                    evaluates.length ?
                                        <div className="site-card-wrapper">
                                            <Row gutter={30}>
                                                {
                                                    evaluates.map(item => {
                                                        return (
                                                            <Col span={8} key={item.id}>
                                                                <div className="item">
                                                                    <div className="top" style={item.score < 60 ? { background: 'rgb(255, 73, 73)' } : (item.score >= 60 && item.score <= 80 ? { background: 'rgb(255, 186, 0)' } : { background: 'rgb(24, 144, 255)' })}>
                                                                        <div className="score">
                                                                            评价分数：
                                                                            <span>{item.score}</span>
                                                                        </div>
                                                                        <div className="level">
                                                                            {
                                                                                item.score < 60 ? '差劲' : (item.score >= 60 && item.score <= 80 ? '良好' : '优秀')
                                                                            }
                                                                        </div>
                                                                    </div>
                                                                    <div className="center">
                                                                        评价：{item.note}
                                                                    </div>
                                                                    <div className="bottom">
                                                                        <div className="creator">
                                                                            <span style={{ marginRight: 10 }}>评价人：{item.userName}</span>


                                                                        </div>
                                                                        <div className="time">{rTime(item.createdAt)}</div>
                                                                    </div>
                                                                </div>
                                                            </Col>
                                                        )
                                                    })
                                                }
                                            </Row>
                                        </div>
                                        :
                                        <div style={{ margin: '40px 0' }}><NoInfo >==暂无评价==</NoInfo></div>

                                }
                            </div>
                        </div>
                    </>
            }
        </div>
    )
}
Dashboard = withSelector(Dashboard)
export default connect(state => ({ userInfo: state.userInfo }), { updateInfo })(Dashboard)